<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表单部分 -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <span class="tipsTop" ><i class="el-icon-info"/>目前只支持学科和关键字搜索</span>
                <el-button type="success" @click="$router.push(`/questions/new`)"><i class="el-icon-edit"></i> 新增试题</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <template>
                <el-form-item label="学科">
                <el-select v-model="form.subject" placeholder="请选择" @change="hSubject(form.subject)">
                  <el-option v-for="item in subjectList" :key="item.id" :value="item.id" :label="item.subjectName"></el-option>
                </el-select>
              </el-form-item>
              </template>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="form.twoLevelDirectory" placeholder="请选择">
                  <el-option :value="item.value" v-for="item in directorysList" :key="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="form.tags" placeholder="请选择">
                  <el-option :value="item.id" v-for="(item,index) in tags" :key="index" :label="item.tagName"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input placeholder="请输入" v-model="form.keyword"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="form.questionType" placeholder="请选择">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简答" value="3"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option label="简单" value="1"></el-option>
                  <el-option label="一般" value="2"></el-option>
                  <el-option label="困难" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option :value="item" v-for="(item,index) in directionList" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="form.creator" placeholder="请选择">
                  <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input placeholder="请输入" v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input placeholder="请输入"  v-model="form.abbreviation"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <div style="display:flex">
                  <el-select class="space" v-model="form.province" placeholder="请选择">
                    <el-option :label="item" :value="item" v-for="item in provinceList" :key="item"></el-option>
                  </el-select>
                  <el-select v-model="form.city" placeholder="请选择">
                    <el-option v-for="item in citysList" :key="item" :value="item" :label="item"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="hSearch">搜索</el-button>
                <el-button @click="resetForm">清除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 隔开线部分 -->
        <div class="bg-purple-light tips">
          <i class="el-icon-info" />
          <span>数据一共{{total}}条</span>
        </div>
        <!-- 表格部分 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column width="140px" prop="number" label="试题编号"></el-table-column>
          <el-table-column width="80px" prop="subject" label="学科"></el-table-column>
          <el-table-column width="80px" prop="catalog" label="目录"></el-table-column>
          <el-table-column width="80px" prop="questionType" label="题型">
            <template slot-scope="scope">
              {{questionType(scope.row.questionType)}}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干"></el-table-column>
          <el-table-column prop="addDate" label="录入时间"></el-table-column>
          <el-table-column width="100px" prop="difficulty" label="难度">
            <template slot-scope="scope">
              {{difficulty(scope.row.questionType)}}
            </template>
          </el-table-column>
          <el-table-column width="140px" prop="creator" label="录入人"></el-table-column>
          <el-table-column width="240px" label="操作">
            <template slot-scope="scope">
              <el-button plain type="primary" icon="el-icon-view" circle @click="btnView(scope.row)"></el-button>
              <el-button plain type="success" icon="el-icon-edit" circle @click="$router.push(`/questions/new?id=${scope.row.id}`)"></el-button>
              <el-button plain type="danger" icon="el-icon-delete" circle @click="btnDel(scope.row)"></el-button>
              <el-button
              plain
              type="warning"
              icon="el-icon-check"
              circle @click="btnChoice(scope.row)"
              ></el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next, sizes,jumper"
          :total="total"
          :current-page.sync="curPage"
          :page-size="pageParams.pagesize"
          :page-sizes="[3, 5, 10]"
          @current-change="hCurrentChange"
          @size-change="hSizeChange"
         />
         <!-- 弹窗 -->
         <el-dialog
          :visible.sync="showDialog"
          :close-on-click-modal=false
          :close-on-press-escape=false
          title="题目预览"
          @close="hClose"
          >
           <QuestionPreview ref="questView" :options="options" :listView="listView" @close="hClose" />
         </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// api接口
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { list as listTags } from '@/api/hmmm/tags'
import { list as listSubject } from '@/api/hmmm/subjects'
import { provinces, citys } from '@/api/hmmm/citys'
import { list as userList } from '@/api/base/users'
import { simple as directorysList } from '@/api/hmmm/directorys'
// 组件
import QuestionPreview from '@/module-hmmm/components/question-preview-basicQuestion.vue'
// 方法导入
import { parseTime, html2Text } from '@/utils/index'
const provinceList = provinces()
export default {
  components: {
    QuestionPreview
  },
  data () {
    return {
      form: {
        subject: '', // 学科
        twoLevelDirectory: '', // 二级目录
        tags: '', // 标签
        questionType: '', // 问题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creator: '', // 录入人
        remarks: '', // 备注
        abbreviation: '', // 企业简称
        province: '', // 省市
        city: '', // 城市
        keyword: '' // 关键字
      },
      pageParams: {
        page: 1, // 当前页面
        pagesize: 5 // 页面中数据数目
      },
      choiceState: {
        choiceState: 1 // 是否加入精选
      },
      tableData: [],
      total: 0, // 总条数
      curPage: 1, // 当前页
      showDialog: false, // 是否显示弹窗
      listView: [], // 当前题目的详情
      options: [], // 单选多选的详情
      subjectList: [], // 所有学科的列表
      userList: [], // 录入人列表
      citysList: [], // 城市列表
      tags: [], // 标签列表
      provinceList, // 省市列表
      directionList: direction, // 方向列表
      directorysList: [] // 二级目录列表
    }
  },
  created () {
    this.loadQuestionList()
    this.loadSubject()
    this.loadUserList()
  },
  computed: {
    // 省市下拉
    newProvince () {
      return this.form.province
    }
  },
  watch: {
    newProvince: {
      handler (newVal, oldVal) {
        this.citysList = citys(newVal)
      }
    }
  },
  methods: {
    // ------------------------------方法
    questionType (value) {
      // eslint-disable-next-line eqeqeq
      const item = questionType.find(item => item.value == value)
      return item.label
    },
    difficulty (value) {
      // eslint-disable-next-line eqeqeq
      const item = difficulty.find(item => item.value == value)
      return item.label
    },
    opSort (keyName) {
      return function (objectN, objectM) {
        var valueN = objectN[keyName]
        var valueM = objectM[keyName]
        if (valueN < valueM) return -1
        else if (valueN > valueM) return 1
        else return 0
      }
    },
    hCurrentChange (curPage) {
      this.pageParams.page = curPage
      this.loadQuestionList()
    },
    hSizeChange (sizes) {
      this.pageParams.pagesize = sizes
      this.loadQuestionList(this.pageParams)
    },
    // ------------------------------加载
    async loadQuestionList () {
      try {
        const res = await list({ ...this.form, ...this.pageParams })
        this.total = res.data.counts
        this.tableData = res.data.items
        this.tableData.forEach(item => {
          item.addDate = parseTime(item.addDate)
          item.question = html2Text(item.question)
        })
      } catch (error) {
        console.log(error)
      }
    },
    async loadSubject () {
      try {
        const res = await listSubject({ page: 1, pagesize: 1000 })
        this.subjectList = res.data.items
      } catch (error) {
        console.log(error)
      }
    },
    async loadUserList () {
      try {
        const res = await userList()
        this.userList = res.data.list
      } catch (error) {
        console.log(error)
      }
    },
    // ------------------------------预览
    btnView (data) {
      this.showDialog = true
      this.doView(data)
    },
    async doView (data) {
      try {
        const res = await detail(data)
        this.listView = res.data
        this.options = this.listView.options
        this.options.sort(this.opSort('code'))
        this.listView.question = html2Text(this.listView.question)
        this.listView.answer = html2Text(this.listView.answer)
        this.listView.difficulty = this.difficulty(this.listView.difficulty)
        this.listView.questionType = this.questionType(this.listView.questionType)
      } catch (error) {
        console.log(error)
      }
    },
    // ------------------------------删除
    btnDel (data) {
      this.$confirm('确认要删除吗?', '提示', {}).then(() => {
        this.doDel(data)
      }).catch(() => {
      })
    },
    async doDel (data) {
      try {
        await remove(data)
        // eslint-disable-next-line eqeqeq
        if (this.tableData.length == 1) {
          this.pageParams.page--
          if (this.tableData.length <= 0) {
            this.pageParams.page = 1
          }
        }
        this.loadQuestionList()
      } catch (error) {
        console.log(error)
      }
    },
    // ------------------------------精选
    btnChoice (data) {
      this.$confirm('确认加入精选题库?', '提示', {}).then(() => {
        this.doChoice(data)
      }).catch(() => {})
    },
    async doChoice (data) {
      try {
        await choiceAdd({ ...data, ...this.choiceState })
        this.loadQuestionList()
        this.$router.push('/questions/choice')
      } catch (error) {
        console.log(error)
      }
    },
    // ------------------------------搜索
    async hSearch () {
      this.pageParams.page = 1
      this.curPage = this.pageParams.page
      this.loadQuestionList()
    },
    hSubject (value) {
      this.form.subjectID = value
      this.form.tags = ''
      this.form.twoLevelDirectory = ''
      this.doTags({ ...this.form, subjectName: this.form.subject })
      this.doDirectorys({ subjectID: value })
    },
    // --------------------------下拉筛选
    async doDirectorys (data) {
      try {
        const res = await directorysList(data)
        this.directorysList = res.data
      } catch (error) {
        console.log(error)
      }
    },
    async doTags (data) {
      try {
        const res = await listTags(data)
        this.tags = res.data.items
      } catch (error) {
        console.log(error)
      }
    },
    // ----------------关闭弹窗 + 重置表单
    hClose () {
      this.showDialog = false
      this.$refs.questView.showVideo = false
    },
    resetForm () {
      this.form = {
        subject: '',
        twoLevelDirectory: '',
        tags: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creator: '',
        remarks: '',
        abbreviation: '',
        province: '',
        city: '',
        keyword: ''
      }
      this.$refs.form.resetFields()
      this.hSearch()
      this.directorysList = []
      this.tags = []
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input,.el-select{
  width:100%!important;
}
.el-form{
  .el-button {
  float: right;
  margin-left: 10px;
  }
}
.space{
    margin-right: 10px;
}
.bg-purple-light {
  background: #f4f4f5;
  margin-bottom: 15px;
}
.tips {
  line-height: 34px;
  padding: 0px 15px;
  span{
    font-size: 12px;
    color: gray;
  }
  i {
    margin-right: 10px;
    color: gray;
  }
}
.el-table {
  .el-button {
    margin-right: 8px;
  }
}
.el-pagination {
  float: right;
  margin: 20px 0;
}
.tipsTop{
  color:red;
  font-size: 12px;
}
.el-col {
  height:58px;
}
</style>
